﻿@{
    ViewBag.Title = "PerfomanceReport";
}
<h2>Machine Perfomance Report</h2>

<fieldset>
    <legend>Filter</legend>
    <span>Start date</span><input type="text" id="start" />
    <span>Finish date</span><input type="text" id="end" />
    <span>Machine</span>@Html.DropDownList("Machines")
</fieldset>

<div id="chartStatusMachine">
</div>
<script type="text/javascript">
    var name, categories, chart;
    var data = [];

    $(function () {
        $("#start, #end").datepicker(); ;
        $("#start, #end").val(dateFormat(new Date(), "mm/dd/yyyy"));
        $("#start, #end, #Machines").change(fillCharts);

        fillCharts();
    });

    function fillCharts() {
        var params = {
            machineId: $("#Machines").val(),
            startDate: dateFormat($("#start").datepicker("getDate"), "mm/dd/yyyy"),
            endDate: dateFormat($("#end").datepicker("getDate"), "mm/dd/yyyy")
        };

        $.ajax({
            url: '@Url.Action("GeneratePerformanceReport", "Machine")',
            data: params,
            dataType: 'json',
            success: function (json) {
                if (json.noData == false) {
                    //generateExecutionChart(doc);

                    categories = json.errorsCategories;
                    name = "Status";
                    generateStatusChart(json.errorsCategories, json.errorsSeries);
                }
                else {
                    //                    $("#periodSummaryChart")[0].innerHTML = "There's no information for the selected date";   
                    //                    $("#periodSummaryStatusChart")[0].innerHTML = "";
                }
            }
        });
    }

    function generateExecutionChart(json) {
        var chart = new Highcharts.Chart({
            chart: { renderTo: 'periodSummaryChart', className: 'chart', defaultSeriesType: 'line', marginBottom: 25, marginRight: 130 },
            legend: { align: 'right', borderWidth: 0, layout: 'vertical', verticalAlign: 'top', x: -10, y: 100 },
            subtitle: { text: json.period },
            title: { text: 'Evolution runtime', x: -20 },
            tooltip: { formatter: function () { return '<b>' + this.x + '</b><br/>' + this.y + ' minutes'; } },
            xAxis: { categories: json.categories },
            yAxis: { plotLines: [{ color: '#808080', value: 0, width: 1}], title: { text: 'Total Time (minutes)'} }
        });

        $.each(json.series, function (itemNo, item) {
            chart.addSeries({
                name: item.Name,
                data: item.Data
            }, false);
        });

        chart.redraw();
    }

    function generateStatusChart(errorsCategories, errorsSeries) {
        chart = $('#chartStatusMachine').highcharts({
            chart: { type: 'column' },
            title: { text: 'Status' },
            subtitle: { text: 'Title' }, //json.period },
            xAxis: { categories: $.isArray(errorsSeries) ? [''] : errorsCategories },
            yAxis: { min: 0, title: { text: 'Number of Occurences'} },
            credits: { enabled: false },
            legend: { enabled: $.isArray(errorsSeries) },
            plotOptions: {
                column: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function (a) {
                                if (!$.isArray(errorsSeries)) {
                                    generateStatusChart(categories, data);
                                } else {
                                    var currentSerie = a.currentTarget.series;
                                    $.each(data, function (itemNo, item) {
                                        if (item.name == currentSerie.name && currentSerie.data[0].y == item.data[0]) {
                                            var drilldown = item.drilldown;
                                            generateStatusChart(drilldown.categories, drilldown);
                                            return false;
                                        }
                                    });
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        //color: colors[0],
                        style: {
                            fontWeight: 'bold'
                        },
                        formatter: function () {
                            return this.y;
                        }
                    }
                }
            },
            tooltip: {
                formatter: function () {
                    var point = this.point,
                        s = this.x + ':<b>' + this.y + '% market share</b><br/>';
                    if (point.drilldown) {
                        s += 'Click to view ' + point.category + ' versions';
                    } else {
                        s += 'Click to return to browser brands';
                    }
                    return this.y;
                }
            },
            exporting: {
                enabled: false
            }
        }).highcharts();           // return chart

        if ($.isArray(errorsSeries)) {
            if (data == null || data == undefined || data.length == 0) {
                $.each(errorsSeries, function (itemNo, item) {
                    data.push({
                        name: item.Name,
                        data: item.Data,
                        color: item.ColorHexadecimal,
                        drilldown: {
                            categories: item.Drilldown.Categories,
                            data: item.Drilldown.Series[0].Data,
                            name: item.Drilldown.Series[0].Name,
                            color: item.Drilldown.Series[0].ColorHexadecimal
                        }
                    });

                    chart.addSeries(data[data.length - 1], false);
                });
            } else {
                $.each(data, function (itemNo, item) {
                    chart.addSeries(item, false);
                });
            }
        } else {
            var drillData =  {
                name: errorsSeries.name,
                data: errorsSeries.data
                //  color: errorsSeries.color
            };

            chart.addSeries(drillData, false);
        }

        chart.redraw();
    }
</script>
